import React from 'react'
import { Layout } from 'antd';
// 引入左侧侧边组件
import SiderIndex from '@/components/SiderIndex'
// 引入出口文件
import { Outlet } from 'react-router-dom'
// 引入头部组件
import HeaderIndex from '@/components/HeaderIndex'
const { Header, Sider, Content } = Layout;
// 头部
const headerStyle: React.CSSProperties = {
  color: '#1f1f1f',
  height: 60,
  paddingInline: 40,
  lineHeight: '60px',
  backgroundColor: '#fff',
  marginBottom: '35px',
  boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.1)', /* 添加阴影 */
};
// 左侧
const siderStyle: React.CSSProperties = {
  color: '#1f1f1f'
};
const layoutStyle = {
  width: '100%',
  maxWidth: '100%',
  height: '100vh',
  backgroundColor: '#fff',
};
function Home() {
  return (
    <Layout style={layoutStyle}>
      <Header style={headerStyle}>
        <HeaderIndex />
      </Header>
      <Layout>
        <Sider width="12%" style={siderStyle}>
          <SiderIndex />
        </Sider>
        <Content style={{ background:'#fff',padding:'0 50px',overflow:'hidden',overflowY:'auto'}}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}

export default Home
